<template>
	<view class="my_step_box">
		<view class="left">
			<view class="icon">
				<uni-icons :color="color" :type="active ? activeIcon : 'smallcircle-filled'" size="24"></uni-icons>
			</view>
			<view class="line_box">
				<view class="line"></view>
			</view>
		</view>
		<view class="right">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
	const props=defineProps({
		color:{
			type:String
		},
		active:{
			type:Boolean,
			default:false
		},
		activeIcon:{
			type:String,
			default:'navigate-filled'
		}
	})
</script>

<style lang="less">
	.my_step_box{
		width: 100%;
		display: flex;
		overflow: hidden;
		margin: 20rpx 0;
		.left{
			display: flex;
			flex-wrap: wrap;
			padding-left: 10rpx;
			.icon{
				margin-top: 10rpx;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				transform: rotate(90deg)
			}
			.line_box{
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				.line{
					border-left: 1px solid v-bind(color);
				}
			}
		}
		.right{
			width: calc(94vw);
		}
	}
</style>